// 三亚地图应用 - 主脚本文件
// 使用OpenLayers实现深蓝主题的三亚市地图

// 三亚市中心坐标 (经度, 纬度)
const SANYA_CENTER = [109.5122, 18.2478];

// 地图缩放级别配置
const ZOOM_CONFIG = {
    initial: 11,        // 初始缩放级别
    min: 8,            // 最小缩放级别
    max: 18            // 最大缩放级别
};

// 深蓝主题配色方案
const THEME_COLORS = {
    background: '#0d47a1',
    water: '#1565c0',
    land: '#1a237e',
    roads: {
        primary: '#ffffff',     // 主要道路
        secondary: '#e3f2fd',   // 次要道路
        highway: '#ffb74d'      // 高速公路
    },
    text: '#ffffff',
    borders: '#64b5f6'
};

let map; // 全局地图对象

/**
 * 初始化地图
 */
function initializeMap() {
    try {
        // 创建深色主题的瓦片图层
        const darkTileLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                // 使用CartoDB深色主题
                url: 'https://{a-d}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
                attributions: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="https://carto.com/attribution">CARTO</a>',
                maxZoom: 20
            })
        });

        // 创建地图视图
        const mapView = new ol.View({
            center: ol.proj.fromLonLat(SANYA_CENTER), // 转换坐标系到Web墨卡托
            zoom: ZOOM_CONFIG.initial,
            minZoom: ZOOM_CONFIG.min,
            maxZoom: ZOOM_CONFIG.max,
            constrainResolution: true // 限制分辨率，使缩放更平滑
        });

        // 初始化地图
        map = new ol.Map({
            target: 'map',
            layers: [darkTileLayer],
            view: mapView
        });

        // 确保地图对象创建成功
        if (!map) {
            throw new Error('地图对象创建失败');
        }

        // 等待地图渲染完成
        map.once('rendercomplete', function() {
            console.log('地图渲染完成');
            
            // 添加中文标注图层
            addChineseLabelsLayer();
            
            // 设置地图事件监听
            setupMapEvents();
            
            // 初始化自定义控件
            initializeCustomControls();
            
            console.log('三亚地图初始化成功');
        });
        
    } catch (error) {
        console.error('地图初始化失败:', error);
        showErrorMessage('地图加载失败，请刷新页面重试');
    }
}

/**
 * 添加中文标注图层
 */
function addChineseLabelsLayer() {
    try {
        // 添加OpenStreetMap中文标注图层
        const chineseLabelsLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                attributions: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }),
            opacity: 0 // 设置为透明，只显示标注
        });
        
        map.addLayer(chineseLabelsLayer);
        console.log('中文标注图层添加成功');
        
    } catch (error) {
        console.error('添加中文标注图层失败:', error);
    }
}

/**
 * 设置地图事件监听
 */
function setupMapEvents() {
    // 禁用右键菜单
    document.getElementById('map').addEventListener('contextmenu', function(e) {
        e.preventDefault();
        return false;
    });
    
    // 地图加载完成事件
    map.on('loadend', function() {
        console.log('地图瓦片加载完成');
    });
    
    // 地图移动事件
    map.on('moveend', function() {
        const view = map.getView();
        const center = ol.proj.toLonLat(view.getCenter());
        const zoom = view.getZoom();
        console.log(`地图中心: [${center[0].toFixed(4)}, ${center[1].toFixed(4)}], 缩放级别: ${zoom.toFixed(1)}`);
    });
    
    // 地图点击事件
    map.on('click', function(evt) {
        const coordinate = ol.proj.toLonLat(evt.coordinate);
        console.log(`点击坐标: [${coordinate[0].toFixed(6)}, ${coordinate[1].toFixed(6)}]`);
    });
}

/**
 * 初始化自定义控件
 */
function initializeCustomControls() {
    // 缩放按钮事件监听
    document.getElementById('zoom-in').addEventListener('click', function() {
        const view = map.getView();
        const currentZoom = view.getZoom();
        if (currentZoom < ZOOM_CONFIG.max) {
            view.animate({
                zoom: currentZoom + 1,
                duration: 300
            });
        }
    });
    
    document.getElementById('zoom-out').addEventListener('click', function() {
        const view = map.getView();
        const currentZoom = view.getZoom();
        if (currentZoom > ZOOM_CONFIG.min) {
            view.animate({
                zoom: currentZoom - 1,
                duration: 300
            });
        }
    });
    
    console.log('自定义控件初始化完成');
}

/**
 * 显示错误信息
 */
function showErrorMessage(message) {
    const errorDiv = document.createElement('div');
    errorDiv.style.cssText = `
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(244, 67, 54, 0.9);
        color: white;
        padding: 20px;
        border-radius: 8px;
        z-index: 10000;
        font-family: Microsoft YaHei, sans-serif;
        text-align: center;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    `;
    errorDiv.textContent = message;
    document.body.appendChild(errorDiv);
    
    // 3秒后自动移除错误信息
    setTimeout(() => {
        document.body.removeChild(errorDiv);
    }, 3000);
}

/**
 * 调整地图视图到三亚市范围
 */
function fitToSanyaBounds() {
    const sanyaBounds = [
        109.2, 18.0,  // 西南角 [经度, 纬度]
        109.8, 18.5   // 东北角 [经度, 纬度]
    ];
    
    const extent = ol.proj.transformExtent(sanyaBounds, 'EPSG:4326', 'EPSG:3857');
    
    map.getView().fit(extent, {
        duration: 1000,
        padding: [50, 50, 50, 50]
    });
}

/**
 * 页面加载完成后初始化地图
 */
document.addEventListener('DOMContentLoaded', function() {
    console.log('页面加载完成，开始初始化三亚地图...');
    
    // 延迟100ms确保DOM完全准备好
    setTimeout(function() {
        try {
            initializeMap();
            
            // 监听地图渲染完成事件，然后调整到三亚范围
            if (map) {
                map.once('rendercomplete', function() {
                    setTimeout(function() {
                        fitToSanyaBounds();
                    }, 500);
                });
            }
        } catch (error) {
            console.error('初始化地图时出错:', error);
            showErrorMessage('地图初始化失败: ' + error.message);
        }
        
    }, 100);
});

// 窗口大小变化时重新调整地图
window.addEventListener('resize', function() {
    if (map) {
        setTimeout(function() {
            map.updateSize();
        }, 100);
    }
}); 